<template>
	<el-container class="main-wrapper">
		<!-- 头部区域增强 -->
		<el-header class="main-header">
			<div class="header-content">
				<div class="branding">
					<i class="el-icon-magic-stick brand-icon"></i>
					<span class="brand-text">选择困难症终结者</span>
				</div>
				<div class="right-buttons">
					<div class="block">
						<el-avatar :src="imageUrl" class="header-avatar" :fit="cover"></el-avatar>
					</div>
					<el-button type="primary" size="mini" class="profile-btn" @click="gotoPersonalCenter" icon="el-icon-user">
						个人中心
					</el-button>
					<el-button type="info" size="mini" class="logout-btn" @click="logout()" icon="el-icon-switch-button">
						安全退出
					</el-button>
				</div>
				<!-- <el-button type="info" size="mini" class="logout-btn" @click="logout()" icon="el-icon-switch-button"> -->
				<!-- 	安全退出
				</el-button> -->
			</div>
		</el-header>

		<!-- 主体区域优化 -->
		<el-container class="content-wrapper">
			<!-- 侧边导航栏美化 -->
			<el-aside width="220px" class="enhanced-sidebar">
				<el-menu class="side-menu" :default-active="activeIndex" background-color="#304156" text-color="#bfcbd9"
				 active-text-color="#409EFF" router :collapse-transition="false">
					<div class="logo-container">
						<i class="el-icon-setting logo-icon"></i>
						<span class="logo-text">决策管理中心</span>
					</div>

					<el-menu-item index="/main" class="menu-item">
						<i class="el-icon-s-home menu-icon"></i>
						<span slot="title">控制面板</span>
						<i class="el-icon-arrow-right arrow-icon"></i>
					</el-menu-item>

					<!-- 					<el-menu-item index="/main/AddOrEditQuestion" class="menu-item">
						<i class="el-icon-circle-plus-outline menu-icon"></i>
						<span slot="title">新建问题</span>
						<i class="el-icon-arrow-right arrow-icon"></i>
					</el-menu-item> -->
					<el-menu-item index="/main/AddOrEditQuestion" class="menu-item" @click="handleRefresh">
						<i class="el-icon-circle-plus-outline menu-icon"></i>
						<span slot="title">新建问题</span>
						<i class="el-icon-arrow-right arrow-icon"></i>
					</el-menu-item>
					<el-menu-item index="/main/question" class="menu-item">
						<i class="el-icon-data-analysis menu-icon"></i>
						<span slot="title">查看问题</span>
						<i class="el-icon-arrow-right arrow-icon"></i>
					</el-menu-item>

					<el-menu-item index="/main/history" class="menu-item">
						<i class="el-icon-notebook-2 menu-icon"></i>
						<span slot="title">查看历史</span>
						<i class="el-icon-arrow-right arrow-icon"></i>
					</el-menu-item>
				</el-menu>
			</el-aside>

			<!-- 主内容区增强 -->
			<el-main class="main-content">
				<router-view></router-view>
				<div class="decorative-line"></div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import Cookies from "js-cookie";
	export default {
		name: "Main",
		data() {
			return {
				imageUrl: ''
			}
		},
		mounted() {

			this.loginName = Cookies.get("loginName");
			// 初始化时加载头像
			this.loadAvatar();
		},
		methods: {
			// 加载头像（带时间戳防缓存）
			loadAvatar() {
				this.imageUrl = `http://localhost:8088/file/download?loginName=${this.loginName}&t=${Date.now()}`;
			},
			gotoPersonalCenter() {
				this.$router.push('/main/user')
			},
			logout() {

				let _this = this;
				const loginName = Cookies.get("loginName");

				this.$axios.get('/user/logout?loginName=' + loginName)
					.then(function(response) {
						sessionStorage.clear();
						//退出成功，清理cookie
						Cookies.remove("loginName");
						Cookies.remove("password");
						_this.$router.push("/");
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			handleRefresh() {
				this.$router.replace({
					path: '/redirect',
					query: {
						redirect: this.$route.fullPath // 携带当前路径
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main-wrapper {
		height: 100vh;
		background: #f0f2f5;
	}

	.main-header {
		height: 60px !important;
		background: linear-gradient(135deg, #304156 0%, #263445 100%);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

		.header-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			padding: 0 30px;

			.branding {
				display: flex;
				align-items: center;

				.brand-icon {
					font-size: 28px;
					color: #409EFF;
					margin-right: 12px;
				}

				.brand-text {
					font-size: 22px;
					color: #fff;
					letter-spacing: 1.5px;
					font-weight: 300;
					text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
				}
			}
		}
	}

	.enhanced-sidebar {
		background: #304156;
		transition: all 0.3s;

		.logo-container {
			height: 80px;
			display: flex;
			align-items: center;
			padding: 0 20px;
			background: rgba(255, 255, 255, 0.05);

			.logo-icon {
				font-size: 24px;
				color: #409EFF;
				margin-right: 12px;
			}

			.logo-text {
				color: #fff;
				font-size: 18px;
				font-weight: 300;
				white-space: nowrap;
			}
		}
	}

	.menu-item {
		margin: 8px 15px;
		border-radius: 6px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			background: rgba(64, 158, 255, 0.1) !important;
			transform: translateX(5px);

			.arrow-icon {
				opacity: 1;
			}
		}

		&.is-active {
			background: rgba(64, 158, 255, 0.2) !important;
		}

		.menu-icon {
			font-size: 20px;
			margin-right: 15px;
		}

		.arrow-icon {
			position: absolute;
			right: 15px;
			opacity: 0;
			transition: opacity 0.3s;
		}
	}

	.main-content {
		position: relative;
		padding: 30px;
		background: #f5f7fa;

		.decorative-line {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 4px;
			background: linear-gradient(90deg, #409EFF 0%, rgba(64, 158, 255, 0) 100%);
		}
	}

	.logout-btn {
		padding: 8px 15px;
		border-radius: 20px;
		transition: all 0.3s;
		margin-left: 8px;

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
		}
	}

	.right-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.profile-btn {
		background: linear-gradient(135deg, #409EFF, #337ecc);
		border: none;
		border-radius: 20px;
		transition: all 0.3s;

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
		}
	}

	.header-avatar {
		margin-right: 12px;
		cursor: pointer;
		transition: all 0.3s;
		border: 2px solid #fff;
  

	}
</style>
